<template>
  <!-- <div class="shop">订单详情</div> -->

  <div class="shop" v-loading="loading">
    <span class="title">订单基本信息</span>

    <el-button type='primary'
      size='mini'
      @click="closeOrder" v-show='order_detail.order_status !== 20'>关闭订单</el-button>

    <el-table :data="baseInfoData"
      style="width:100%"
      max-height="600"
      border
      class="infotable"
      :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label='订单编号'
        prop='order_no'></el-table-column>
      <el-table-column label='用户账号'
        prop='username'></el-table-column>
      <el-table-column label='支付方式'>
        <template slot-scope="scope">
          <p v-if='scope.row.pay_method == 1'>微信支付（小程序）</p>
          <p v-if='scope.row.pay_method == 5'>支付宝支付</p>
          <p v-if='scope.row.pay_method == 10'>微信支付（APP）</p>
        </template>
      </el-table-column>
      <el-table-column label='订单类型'>
        <template slot-scope="scope">
          <p v-if='scope.row.order_type == 1'>爆款商品</p>
          <p v-if='scope.row.order_type == 5'>现金券</p>
          <p v-if='scope.row.order_type == 10'>拼团</p>
          <p v-if='scope.row.order_type == 15'>会员专享商品</p>
          <p v-if='scope.row.order_type == 20'>优惠买单</p>
          <p v-if='scope.row.order_type == 25'>普通商品</p>
          <p v-if='scope.row.order_type == 30'>会员充值</p>
          <p v-if='scope.row.order_type == 35'>自营商品</p>
        </template>
      </el-table-column>
      <!-- <el-table-column label="所属分类"></el-table-column> -->
      <el-table-column label="订单原价">
        <template slot-scope="scope">
           ¥{{scope.row.total_amount}}
        </template>
      </el-table-column>
       <el-table-column label="商品付款金额" >
         <template slot-scope="scope">
           ¥{{scope.row.product_total_price}}
         </template>
       </el-table-column>
       <el-table-column label="支付运费">
         <template slot-scope="scope">
           ¥{{scope.row.freight_amount}}
         </template>
       </el-table-column>
       <el-table-column label="付款总金额" >
         <template slot-scope="scope">
           ¥{{scope.row.actual_amount}}
         </template>
       </el-table-column>
      <!-- <el-table-column label='订单金额'>
        <template slot-scope="scope">
          ¥{{scope.row.total_amount}}
        </template>
      </el-table-column> -->
      <!-- <el-table-column label='实际支付'>
        <template slot-scope="scope">
           <p v-if='scope.row.order_status==1'>--</p>
          <p v-if='scope.row.order_status==5'>¥{{scope.row.actual_amount}}</p>
          <p v-if='scope.row.order_status==10'>¥{{scope.row.actual_amount}}</p>
          <p v-if='scope.row.order_status==15'>--</p>
          <p v-if='scope.row.refund_status==5'>¥{{scope.row.actual_amount}}</p>
          <p v-if='scope.row.order_status==20'>¥{{scope.row.actual_amount}}</p>
        </template>
      </el-table-column>
      <el-table-column label='分润收益'>
        <template slot-scope="scope">
         
           <p v-if='scope.row.order_status==1'>--</p>
          <p v-if='scope.row.order_status==5'> ¥{{scope.row.commission}}</p>
          <p v-if='scope.row.order_status==10'> ¥{{scope.row.commission}}</p>
          <p v-if='scope.row.order_status==15'>--</p>
          <p v-if='scope.row.refund_status==5'> ¥{{scope.row.commission}}</p>
          <p v-if='scope.row.order_status==20'> ¥{{scope.row.commission}}</p>
        </template>
      </el-table-column> -->
      <el-table-column label='订单状态'>
        <template slot-scope="scope">
          <p v-if='scope.row.order_status==1'>待付款</p>
          <p v-if='scope.row.order_status==5'>待收货</p>
          <p v-if='scope.row.order_status==10'>已完成</p>
          <p v-if='scope.row.order_status==15'>已取消</p>
          <p v-if='scope.row.refund_status==5'>退款申请中</p>
          <p v-if='scope.row.order_status==20'>已关闭</p>
        </template>
      </el-table-column>
    </el-table>


    <span class="title">商品信息</span>
    <el-table :data="woodInfoData"
      style="width:100%"
      max-height="600"
      border
      class="infotable"
      :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label='商品图片'>
        <template slot-scope="scope">
          <img style="width:100px;"
            :src="scope.row.img_url ? scope.row.img_url : errorImg"
            alt />
        </template>
      </el-table-column>
      <el-table-column label='商品名称'
        prop='title'></el-table-column>
      <el-table-column label='商品id'
        prop='product_id'></el-table-column>
      <el-table-column label='数量'
        prop='quantity'></el-table-column>
      <el-table-column label='商品SKU'
        prop='sku'>
      </el-table-column>
      <el-table-column label='订单原价'>
        <template slot-scope="scope">
          ¥{{scope.row.price}}
        </template>
      </el-table-column>
      <el-table-column label='红包抵扣'>
        <template slot-scope="scope">
          ¥{{scope.row.red_packet_discount_price}}
        </template>
      </el-table-column>
       <el-table-column label='商品付款金额'>
        <template slot-scope="scope">
          ¥{{scope.row.product_total_price}}
        </template>
      </el-table-column>
       <el-table-column label='供货成本价格'>
        <template slot-scope="scope">
          ¥{{scope.row.supply_price}}
        </template>
      </el-table-column>
    </el-table>

    <span class="title">分润信息</span>
    <el-table :data="profitInfoData"
      style="width:100%"
      max-height="600"
      border
      class="infotable"
      :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label='订单原价'>
        <template slot-scope="scope">
          ¥{{scope.row.sale_price}}
        </template>
      </el-table-column>
      <el-table-column label='红包抵扣'>
        <template slot-scope="scope">
          ¥{{scope.row.red_packet_discount_price}}
        </template>
      </el-table-column>
      <el-table-column label='商品付款金额'>
        <template slot-scope="scope">
          ¥{{scope.row.product_total_price}}
        </template>
      </el-table-column>
      <el-table-column label='供货成本价'>
        <template slot-scope="scope">
          ¥{{scope.row.supply_price}}
        </template>
      </el-table-column>
      <el-table-column label='利润'>
        <template slot-scope="scope">
          ¥{{scope.row.income}}
        </template>
      </el-table-column>
    </el-table>

    <span class="title">物流信息</span>
    <el-table :data="logisticsInfoData"
      style="width:100%"
      max-height="600"
      border
      class="infotable"
      :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label='物流单号'
        prop='log_num'>
        <template slot-scope="scope">
          <p v-if="scope.row.log_num">{{scope.row.log_num}}</p>
          <p v-else>---</p>
        </template>
      </el-table-column>
      <el-table-column label='收货人'
        prop='name'></el-table-column>
      <el-table-column label='手机号'
        prop='mobile'></el-table-column>
      <el-table-column label='收货地址'
        prop='address'>
        <!-- <template slot-scope="scope">
           ¥{{scope.row.price}}
        </template> -->
      </el-table-column>
      <el-table-column label='物流跟踪'>
        <!-- <template slot-scope="scope"> -->
          <p class="status loginfor"
            @click="watchlogInfomation()">查看物流信息</p>
        <!-- </template> -->
      </el-table-column>
    </el-table>

    <!--关闭订单备注-->
    <jdialog title="关闭订单备注"
      :visible.sync="isCloseOrderremark"
      width="640px">

      <div class="remark">
        <p class="note">提示：关闭订单后，资金会原路返还给用户，请确认无误后操作</p>
        <el-form :model="form"
          :rules="rules"
          ref="ruleForm"
          label-width="140px"
          class="demo-ruleForm">
          <el-form-item label="操作选项："
            prop="refund">
            <el-radio-group v-model="form.status">
              <el-radio label="15">允许退款</el-radio>
              <el-radio label="10">拒绝退款</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="确认退款金额："
            prop="price">
            <el-input size='mini'  v-model="form.price" type='number' style='width:120px;' ></el-input>
          </el-form-item>

          <el-form-item label="操作备注："
            prop="mark">
            <el-input size='mini' v-model="form.mark" placeholder='请输入操作备注' type='textarea' row='4'  ></el-input>
          </el-form-item>
        </el-form>

        <div class="btn-info">
          <el-button  size='mini' @click="isCloseOrderremark = false">取消</el-button>
    <el-button size='mini' type="primary" @click="centerorderInfo">确定</el-button>
        </div>
      </div>
    </jdialog>

    <!--查看物流信息-->
    <!--              :icon="activity.icon"
              :type="activity.type"-->
    <jdialog title="物流详情"
      :visible.sync="isShowWoodsDetailInfo"
      width="640px">
       <div class="block">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in woodActivities"
              :key="index"
              :timestamp="activity.acceptTime">
              {{activity.remark}}
             </el-timeline-item>
          </el-timeline>
       </div>
    </jdialog>
  </div>
</template>



<script>
import errorImg from "@/assets/images/error_img.png";
import {orderDetailGet,closeOrderUpdate, orderLogistics} from '@/api/autarky'
export default {
  data () {
    return {
      order_no: '',
      order_detail:{},
      baseInfoData: [],

      woodInfoData: [],
      errorImg,


      profitInfoData: [],
      logisticsInfoData: [],


      isCloseOrderremark: false,
      form: {
        order_id:'',
        status: '',
        price:'',
        mark:''
      },
      loading:true,
      rules: {
        status: [
          { required: true, message: '请选择操作选项', trigger: 'change' }
        ],
        price:[{ required: true, message: '请输入退款金额', trigger: 'blur' }],
        mark:[{ required: true, message: '请输入操作备注', trigger: 'blur' }],
      },

      //物流详情
      isShowWoodsDetailInfo:false,
      woodActivities:[],
      wood_log_num:'773016201880275',

    }
  },
  created(){
    this.order_no = this.$route.query.order_no
    //获取订单详情数据
    if(this.order_no){
      this.getorderDetailGetData()
    }
  },
  mounted () {
    
  },
  methods: {

    //关闭订单
    closeOrder () {
      if(this.profitInfoData.length ==0){
         this.form.price = 0
      }else{
        this.form.price = this.profitInfoData[0].final_price
      }
      this.form.order_id = this.order_detail.id
      this.isCloseOrderremark = true
    },
    //查看物流信息
    watchlogInfomation () {
      this.isShowWoodsDetailInfo = true
      this.getorderLogisticsData()
    },

    centerorderInfo(){
   
        if(!this.form.status){
        this.$message.error('请选择是否允许退款')
        return
      }
      if(!this.form.mark){
        this.$message.error('请填写备注')
        return
      }

      if(this.form.status == 10){
        this.form.price = 0
      }
     this.getcloseOrderUpdateData()
    },
    //获取订单详情数据
    async getorderDetailGetData(){
      let  res = await orderDetailGet(this.order_no)
      if(res.code === 10000){
        this.order_detail = res.data
        this.baseInfoData.push({order_no:this.order_no,username:res.data.username,pay_method:res.data.pay_method,order_type:res.data.order_type,total_amount:res.data.product.sale_price,product_total_price:res.data.product_total_price,freight_amount:res.data.freight_amount,actual_amount:res.data.actual_amount,commission:res.data.commission,order_status:res.data.order_status,refund_status:res.data.refund_status})

        this.woodInfoData.push({img_url:res.data.img_url,title:res.data.title,product_id:res.data.product_id,quantity:res.data.quantity,sku:res.data.product.sku_title,price:res.data.product.sale_price,red_packet_discount_price:res.data.product.red_packet_discount_price,supply_price:res.data.product.supply_price,product_total_price:res.data.product_total_price})
        
        res.data.income.product_total_price = res.data.product_total_price
        this.profitInfoData.push(res.data.income)

        this.logisticsInfoData.push({log_num:res.data.logistics!=null ? res.data.logistics.number:'',name:res.data.user_address.name,mobile:res.data.user_address.mobile,address:res.data.user_address.province+'.'+res.data.user_address.city+'.'+res.data.user_address.county+'.'+res.data.user_address.address})
        this.loading = false
      }else{
        this.$message.error(res.message)
        this.loading = false
      }
    },

    //关闭订单
    async getcloseOrderUpdateData(){
      let res = await closeOrderUpdate(this.form)
      if(res.code === 10000){
       this.$message.success(res.message)
              this.baseInfoData = []
        this.woodInfoData =[]
        this.profitInfoData = []
        this.logisticsInfoData = []
       this.getorderDetailGetData()
       this.form = {
        order_id:'',
        status: '',
        price:'',
        mark:''
      },
       this.isCloseOrderremark = false
      }else{
        this.$message.error(res.message)
      }
    },
    //获取物流信息
    async getorderLogisticsData(){
      let res = await  orderLogistics(this.order_detail.id)
      if(res.code === 10000){
        this.woodActivities = res.data.logistics_step
        // this.wood_log_num = res.data.number
      }else{
        this.$message.error(res.message)
      }
    },
    tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
  }
}
</script>
<style lang="scss" scoped>
.shop {
  padding: 20px;

  .title {
    color: #333333;
    font-size: 18px;
    margin-right: 12px;
    margin-top: 4px;
  }
  .status {
    color: #f4222d;
  }
  .loginfor {
    cursor: pointer;
  }
  .infotable {
    margin: 20px 0;
  }

  .remark{
    padding: 20px;
    .note{
      color: #666666;
      margin-bottom: 12px;
    }
    .btn-info{
      text-align: center;
    }
  }
  .block{
    padding: 20px;
  }
  
}
</style>